<!--  -->
<template>
  <div class="map-out-container">
    <div id="map-in-contanier"></div>
    <div class="btn-in-container">
      <el-button type="primary" @click="selectComplete" :disabled="!complete">确定</el-button>
    </div>
  </div>
</template>

<script>
  import {utils} from "../../utils/utils";
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data: () => ({
    map : null,
    driving : null,
    currentIndex : 0,
    markerList : [],
      complete :false,
      result : null,
  }),
  model:{
    prop:'latLngList',

  },
  props: {
    //总取点数
    count: {
      type: Number,
      default:1
    },
    latLngList : {
      type: Array,
      default:[]
    },
  },
  components: {},
  created() {

  },

  watch: {

  },

  mounted() {
      this.amapInit();
  },

  methods: {

      selectComplete(){
          this.$emit("drivingComplete" , this.result);
      },

    countWithShow(){
      var that = this;
      if(this.count === this.currentIndex){
        switch (this.count) {
          case 2 :
            this.driving = new AMap.Driving({
              // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
              policy: AMap.DrivingPolicy.LEAST_TIME,
              // size : 4,
              map : this.map
            });

            // var path = [];
            // for(var i in this.latLngList){
            //   path.push({lnglat:[this.latLngList[i].lng, this.latLngList[i].lat]})
            // }

            this.driving.search(this.latLngList[0],this.latLngList[1], function (status, result) {
              // 未出错时，result即是对应的路线规划方案
              if (status === 'complete') {
                  that.$message({ type: "warning", message: "路径规划完成" });
                  that.complete = true;
                  that.result = result;
                // that.$emit("drivingComplete" , result);
              } else {
                that.$message({ type: "warning", message: "货车路线规划失败" });
              }
            })

            break;
          default:break
        }
      }else {
          that.complete = false;
      }
    },

    initMarker() {
      this.map.remove(this.markerList);
      this.currentIndex = 0;
      this.markerList = [];
      this.latLngList.splice(0,this.latLngList.length)
      this.driving.clear();
    },

    amapInit(){
      var that = this;
      window._AMapSecurityConfig = {
        securityJsCode:utils.AMAP_SK,
      }

      AMapLoader.load({
        "key": utils.AMAP_KEY,              // 申请好的Web端开发者Key，首次调用 load 时必填
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ['AMap.Scale','AMap.ToolBar','AMap.Driving'],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map('map-in-contanier');


        this.map.on('click', function(ev) {
          // debugger;
          if(that.currentIndex === that.count){
            that.initMarker();
            that.$message({ type: "success", message: "开始重新记录" });
          }


          that.latLngList.push(ev.lnglat);

          const marker = new AMap.Marker({
            position: ev.lnglat,
            offset: new AMap.Pixel(-10, -10),
            icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
            label: {
              direction: 'top',
              content: '第'+ (++that.currentIndex) + "点",
              offset: new AMap.Pixel(30, -10),
            }
          });

          that.markerList.push(marker)
          that.map.add(marker);

          if(that.currentIndex === that.count){
            that.$message({ type: "success", message: "选择完毕,继续标记将会重新记录" });
          }

          that.countWithShow();

        });

      }).catch(e => {
        console.log("map error ," , e);
      })



    }
  },
  destroyed() {

  }
};
</script>
<style rel='stylesheet/scss' lang='scss' scoped>
.map-out-container{
  padding: 20px;
  width: 100%;
  height: 600px;

  #map-in-contanier{
    width: 100%;
    height: 90%;
  }
  .btn-in-container{
    width: 100%;
    height: 10%;
  }

}
</style>